<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form
                ref="form"
                :model="eariningsSearch"
                :inline="true"
                label-width="85px"
                size="mini"
            >
                <el-form-item label="门店：">
                    <el-select v-model="eariningsSearch.shop_id" clearable>
                        <el-option v-for="item in shopname" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期：">
                    <el-date-picker
                        v-model="eariningsSearch.dataTime"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="btn" pickerOptions>
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div> -->
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="eariningsTable"
                ref="multipleTable"
                border
                height="560"
                tooltip-effect="dark"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                :row-class-name="tableRowClassName"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column
                    type="selection"
                    width="55"
                    :selectable="checkboxSelect">
                </el-table-column>
                <el-table-column label="时间" width="260px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.day_time*1000 | formatDate }}</span><!--  {{ scope.row.day_time*1000 | formatDateBehind }} -->
                    </template>
                </el-table-column>
                <el-table-column label="洗车台数" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="营业额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money }}元</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="结算收益" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.settle }}元</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="门店" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | filshopm }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" width="180px">
                    <template slot-scope="scope">
                        <div class="table-count ml10">
                            <span>{{ scope.row.settle_state | filname }}</span><br>
                            <span>需结算：{{(scope.row.money - scope.row.wash_num*3).toFixed(2)}}元</span>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="合计" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.total }}元</span>
                    </template>
                </el-table-column> -->
                <el-table-column width="200px" v-if="jurisdiction.update_state === 1">
                    <template slot="header">
                        <el-button size="medium" type="warning" @click="settlement">一键结算</el-button>
                    </template>
                    <template slot-scope="scope">
                        <el-button size="small" type="warning" @click="settle(scope.$index, scope.row)">结算</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <!-- <div>
            <el-dialog title="添加" width="50%" :visible.sync="addVisible" center @close="closeAdd">
                <el-form :model="addEarnings">
                    <el-form-item label="时间：" :label-width="formLabelWidth">
                        <el-date-picker
                            v-model="addEarnings.dateTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="服务收益：" :label-width="formLabelWidth">
                        <el-input v-model="addEarnings.serviceRevenue" placeholder="请输入服务收益价格"></el-input>
                        <span>元</span>
                    </el-form-item>
                    <el-form-item label="售后收益：" :label-width="formLabelWidth">
                        <el-input v-model="addEarnings.afterEarnings" placeholder="请输入售后收益价格"></el-input>
                        <span>元</span>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="修改" width="60%" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editEarnings">
                    <el-form-item label="服务收益：" :label-width="formLabelWidth">
                        <el-input v-model="editEarnings.serviceRevenue" placeholder="请输入服务收益价格"></el-input>
                        <span>元</span>
                    </el-form-item>
                    <el-form-item label="售后收益：" :label-width="formLabelWidth">
                        <el-input v-model="editEarnings.afterEarnings" placeholder="请输入售后收益价格"></el-input>
                        <span>元</span>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div> -->
    </div>
</template>

<script>
import echarts from "echarts";
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js";
import {timetamp} from "../../util/time.js";
import {timedata} from "../../util/time.js";
var that
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            addVisible: false, //添加对话框
            editVisible: false, //修改对话框
            formLabelWidth: "100px", //对话框的标签宽度
            shopname: "",
            // addEarnings: {
            //     // 添加对话框
            //     dateTime:"", //时间
            //     serviceRevenue: "", //服务收益
            //     afterEarnings: "" //售后收益
            // },
            // editEarnings: {
            //     // 修改对话框
            //     earningsId: "", //收益id
            //     serviceRevenue: "", //服务收益
            //     afterEarnings: "" //售后收益
            // },
            eariningsSearch: {
                //搜索
                shop_id: "", //门店
                dataTime: "" //时间段
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            selectTable:"", //选中的数据
            eariningsTable: [
                {
                    dateTime: "2020-06-01~2020-06-30", //时间
                    serviceRevenue: 18, //服务收益
                    afterEarnings: 10, //售后收益
                    total: 28 //合计
                },
                {
                    dateTime: "2020-07-01~2020-07-31", //时间
                    serviceRevenue: 16, //服务收益
                    afterEarnings: 14, //售后收益
                    total: 30 //合计
                },
                {
                    dateTime: "2020-08-01~2020-08-31", //时间
                    serviceRevenue: 20, //服务收益
                    afterEarnings: 16, //售后收益
                    total: 36 //合计
                }
            ]
        };
    },
    filters:{
        // 用户名
        filname(id){
            if(id === 1){
                id = "已结算"
            }else if(id === 2){
                id = "未结算"
            }else{return}
            return id
        },
        // 店名
        filshopm(id){
            if(that.shopname !== ""){
                that.shopname.forEach((item)=>{
                    id === item.id ? id = item.name : "";
                })
            }
            return id
        },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount,settle_state:2};
            data.shop_id = this.eariningsSearch.shop_id;
            if(this.eariningsSearch.dataTime !== "" && this.eariningsSearch.dataTime !== null){
                data.start_time = timetamp(String(this.eariningsSearch.dataTime[0]));//开始时间
                data.end_time = timedata(this.eariningsSearch.dataTime[1]);//结束时间))
            }
            for(var i in data) data[i] === "" ? delete data[i] : "";
            console.log(data)
            utils.request("/dayStatement/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.eariningsTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){
                    resp.data.data.total > 0 
                    ? this.$message({
                        message: "找到" + resp.data.data.total + "条数据",
                        type: "success"
                    }) : this.$message("没有符合条件的数据")
                }
            })
        },
        checkboxSelect(row,index){
            if(row.settle_state === 1){
                return 0
            }else {
                return 1
            }
        },

        // renderHeader(h) {
        //     return (
        //         <div >
        //                 <el-button type="warning" onclick="">一键结算</el-button>
        //         </div>
        //         ) 
        // },
        // add() {
        //     // 添加
        //     // 添加时添加日期、服务收益、售后收益
        //     this.addVisible = true;
        // },
        // confirmAdd() {
        //     // 确认添加
        //     this.addVisible = false;
        // },
        // cancelAdd() {
        //     // 取消添加
        //     this.addEarnings.serviceRevenue = "";
        //     this.addEarnings.afterEarnings = "";
        //     this.addVisible = false;
        // },
        // closeAdd() {
        //     // 关闭添加
        //     this.addEarnings.serviceRevenue = "";
        //     this.addEarnings.afterEarnings = "";
        //     this.addVisible = false;
        // },
        // edit(index, row) {
        //     // 修改
        //     // 修改时修改服务收益、售后收益
        //     this.editVisible = true;
        // },
        // confirmEdit() {
        //     // 确认修改
        //     this.editVisible = false;
        // },
        // cancelEdit() {
        //     // 取消修改
        //     this.editEarnings.serviceRevenue = "";
        //     this.editEarnings.afterEarnings = "";
        //     this.editVisible = false;
        // },
        // closeEdit() {
        //     // 关闭修改
        //     this.editEarnings.serviceRevenue = "";
        //     this.editEarnings.afterEarnings = "";
        //     this.editVisible = false;
        // },
        // remove(index, row) {
        //     // 删除
        // },
        // 一键结算
        settlement(){
            // console.log(this.selectTable!=="",this.selectTable!==null,this.selectTable!==undefined,this.selectTable!==NaN,)
            console.log(this.selectTable)
            if(this.selectTable !== ""){
                let afterearnings=0,serveearnings=0
                for(var i=0;i<this.selectTable.length;i++){
                    afterearnings += Number(this.selectTable[i].money);
                    serveearnings += (Number(this.selectTable[i].money) - this.selectTable[i].wash_num * 3)
                }
                const h = this.$createElement;
                this.$msgbox({
                    title: '一键结算',
                    message: h('p', null, [
                        h('span', null, '总营业额：'),
                        h('span', { style: 'color: red' }, afterearnings),
                        h('span', null, '元，总需结算：'),
                        h('span', { style: 'color: red' }, serveearnings),
                        h('span', null, '元,是否结算的到用户账户? '),
                    ]),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            

                            let data = {day_statement_arr:[]}
                            data.day_statement_arr = this.selectTable.map((item)=>{
                                return{
                                    id: item['id'],
                                    shop_id: item['shop_id'],
                                    money: item['money'],
                                    wash_num: item['wash_num']
                                }
                            })
                            utils.request("/dayStatement/update","post",JSON.stringify(data)).then(resp=>{
                                if(resp.code === 200 && resp.data === "更新成功！"){
                                    for(var o=0;o<this.selectTable.length;o++){
                                        for(var y=0;y<this.eariningsTable.length;y++){
                                            if(this.selectTable[o].id === this.eariningsTable[y].id){
                                                this.eariningsTable.splice(y,1)
                                            }
                                        }
                                    }
                                    this.$refs.multipleTable.clearSelection();// 删除后清空之前选择的数据
                                    instance.confirmButtonLoading = false;
                                    done();
                                }else{}
                            })
                        } else {
                            done();
                        }
                    }
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '成功结算'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取结算'
                        });          
                    });
            }else{
                this.$message.error("请先勾选需要结算的订单再点击结算")
            }
        },
        // 单独结算
        settle(inde,row){
            this.$confirm('此操作将修改该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = {
                    day_statement_arr:[{
                        id: row.id,
                        shop_id: row.shop_id,
                        money: row.money,
                        wash_num: row.wash_num
                    }
                ]}
                console.log(data)
                utils.request("/dayStatement/update","post",JSON.stringify(data)).then(resp=>{
                    console.log(resp)
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                }); 
            })
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        tableRowClassName(row, index){
            // 给每条数据添加一个索引
            row.row.index = row.rowIndex
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            // console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    mounted() {},
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        utils.request("/shop/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            this.shopname = resp.data.data.data;
        })
        this.searchClick(1)
    },
    beforeCreate(){
        that = this;
    },
};
</script>
<style scoped>
.table-count{
    text-align: left;
    line-height: 20px;
}
</style>



